<template>
	<view>
		<view class="top">
			<input placeholder="请输入手机号" v-model="phone" type="number"/>
		</view>
		<view class="content">
			<textarea class="sr" placeholder="请输入您的反馈意见！" maxlength="500" v-model="text"></textarea>
		</view>
		<view class="bom">
			<view class="bom_img">
				<view class="item" v-for="(item,index) in fileList" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<u-icon class="icon" name="close-circle-fill" @click="delImg(index)"></u-icon>
				</view>
				<view class="item" v-if="fileList.length < 6" @click="selectImg(6)">
					<view class="item_icon">
						<u-icon name="plus"></u-icon>
					</view>
					<view class="item_text">选择图片</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="sub">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text:'',
				phone:'',
				action: 'https://app.yuxiang123.cn/api/public/upload_img',
				fileList: [],
			}
		},
		onLoad() {
			//判断是否是华为
			let isHuaWei= getApp().globalData.isHuaWei;
			if(isHuaWei){
				this.setData({
					isHuaWei: isHuaWei
				})
			}
		},
		methods: {
			sub:function(){
				if(this.phone == '' || this.phone.length < 11){
					return this.$Toast('请输入您的手机号')
				}
				if(this.text == ''){
					return this.$Toast('请输入要反馈的问题')
				}
				if(this.fileList.length>0){
					var imgs=this.fileList.join(',');
				}else{
					var imgs='';
				}
				
				this.$show();
				this.$http.post('user/feedback_save',{
					mobile:this.phone,
					content:this.text,
					imgs:imgs
				}).then((res)=>{
					this.$hide()
					this.$Toast(res.data.msg)
					if(res.data.ret == 1){
						setTimeout(function() {
							uni.navigateBack({
								delta:1
							})
						}, 1000);
					}
				})
			},
			
			selectImg(index){
				var that = this;
				// #ifdef  APP-PLUS
				if(!uni.getStorageSync('get_image_feedback') && that.isHuaWei){
					uni.showModal({
						title: "获取你的相册权限",
						content: "将获取你的相册权限,用于上传意见反馈图片",
						success: function (res) {
							if (res.cancel) {
							} else if (res.confirm) {
								uni.setStorageSync('get_image_feedback',1);
								uni.chooseImage({
									count: 1, //默认9
									sourceType:['album'],					
									success: function (res) {
										var list = res.tempFilePaths;
										for(var i=0;i<list.length;i++){
											that.upImg(res.tempFilePaths[i],index)
										}
									},
									fail(e) {
										if(that.isHuaWei){
											if(e.errCode == 11 &&  e.errMsg == 'chooseImage:fail No Permission'){
												uni.showModal({
													content: '检测到您没打开相机权限，如需使用拍摄功能请前往设置开启相机权限？',
													confirmText: "确认",
													cancelText: '取消',
												})
											}else if(e.errCode == 12 &&  e.errMsg == 'chooseImage:fail No Permission'){
												uni.showModal({
													content: '检测到您没打开相册权限，如需使用相册选择功能请前往设置开启相册权限？',
													confirmText: "确认",
													cancelText: '取消',
												})
											}
										}
									}
								});
							}
						},
					});
				}else{
					uni.chooseImage({
						count: 1, //默认9
						sourceType:['album'],					
						success: function (res) {
							var list = res.tempFilePaths;
							for(var i=0;i<list.length;i++){
								that.upImg(res.tempFilePaths[i],index)
							}
						},
						fail(e) {
							if(that.isHuaWei){
								if(e.errCode == 11 &&  e.errMsg == 'chooseImage:fail No Permission'){
									uni.showModal({
										content: '检测到您没打开相机权限，如需使用拍摄功能请前往设置开启相机权限？',
										confirmText: "确认",
										cancelText: '取消',
									})
								}else if(e.errCode == 12 &&  e.errMsg == 'chooseImage:fail No Permission'){
									uni.showModal({
										content: '检测到您没打开相册权限，如需使用相册选择功能请前往设置开启相册权限？',
										confirmText: "确认",
										cancelText: '取消',
									})
								}
							}
						}
					});
				}
				// #endif

				// #ifdef MP-WEIXIN
				uni.chooseImage({
					count: 1, //默认9
					sourceType:['camera', 'album'],					
					success: function (res) {
						var list = res.tempFilePaths;
						for(var i=0;i<list.length;i++){
							that.upImg(res.tempFilePaths[i],index)
						}
					}
				});
				// #endif
			},
			upImg:function(url,index){
				this.$show();
				var that = this;
				uni.uploadFile({
					url: that.$url + 'public/upload_img',
					filePath: url,
					name: 'file',
					success: (uploadFileRes) => {
						that.$hide()
						if(index == 1){
							that.fmImg = JSON.parse(uploadFileRes.data).img_url;
						}else{
							that.fileList.push(JSON.parse(uploadFileRes.data).img_url)
							that.fmImg = that.fileList[0];
						}
					}
				});
			},
			delImg(index){
				this.fileList.splice(index,1)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
.top{
	input{
		font-size: 28upx;
		width: 90%;
		margin:20upx auto;
		padding: 10px;
		background-color: #FFFFFF;
		border-radius: 5upx;
	}
}
.content{
	.sr {
		background-color: #FFFFFF;
		width: 90%;
		height: 300upx;
		margin: auto;
		padding: 10px;
		font-size: 28upx;
		border-radius: 10upx;
	}
}

.bom{
	margin: 20upx;
	padding: 20upx;
	background-color: #FFFFFF;
	border-radius: 10upx;
	.bom_title{
		
	}
	.bom_img{
		display: flex;
		flex-wrap: wrap;
		.item{
			text-align: center;
			width: 30%;
			background-color: #f0f0f0;
			height: 200upx;
			border-radius: 10upx;
			margin-top: 20upx;
			color: #999999;
			margin-right: 20upx;
			position: relative;
			.icon{
				position: absolute;
				right: -10upx;
				top: -20upx;
				font-size: 40upx;
				background-color: #FFFFFF;
				border-radius: 50%;
				color: rgba($color: #333, $alpha: 0.5);
			}
			.item_icon{
				margin-top: 40upx;
				font-size: 40upx;
			}
			.item_text{
				color: #999999;
				font-size: 26upx;
				margin-top: 10upx;
			}
			image{
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
			.seturl{
				position: absolute;
				bottom: 0;
				width: 100%;
				background-color: rgba($color: #333, $alpha: 0.5);
				border-radius: 0 0 10upx 10upx;
				color: #FFFFFF;
				font-size: 24upx;
				padding: 10upx 0;
			}
			.selectSet{
				background-color: rgba($color: red, $alpha: 0.5);
			}
		}
	}
}
.btn{
	width: 90%;
	margin:50upx auto;
	padding: 20upx  0;
	font-size: 30upx;
	background-color: #3662EC;
	color: #fff;
	text-align: center;
	border-radius: 50upx;
}
</style>
